<template>
  <div class="container">
    <div class="heade">
      <div class="header">
        <span class="text1">员工管理</span>
        <!-- 收起筛选/展开筛选 -->
        <span class="text4" @click="isShow = !isShow">
          <i class="el-icon-arrow-down" v-if="!isShow">展开筛选</i>
          <i class="el-icon-arrow-up" v-if="isShow">收起筛选</i>
        </span>
        <el-button type="primary" size="mini" class="info">查询结果</el-button>
      </div>
      <!-- 以下div为筛选查询 -->
      <div class="heade-text" v-show="isShow">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          class="heade-form"
        >
          <el-form-item label="输入搜索:">
            <el-input
              v-model="form.name"
              placeholder="用户名/姓名"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属部门：">
            <el-input
              v-model="form.dept"
              placeholder="部门名称"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="between">
      <div class="header">
        <span class="text">数据列表</span>
        <el-button
          type="primary"
          size="mini"
          class="info1"
          @click="dialogVisible = true"
          >添加</el-button
        >
        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="员工账号">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
              <el-input v-model="form.dept"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="form.position"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-input v-model="form.status"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="onSubmit"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="between-table">
        <el-table
          :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
          :cell-style="{ fontSize: '12px', textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection"></el-table-column> -->
          <!-- 
                        客户名称
                        客户类型
                        联系人
                        联系电话
                        地址
                        创建人
                        负责人
                        创建时间
                        操作 -->
          <el-table-column prop="username" label="员工账号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="phone" label="手机号"> </el-table-column>
          <el-table-column prop="dept" label="所属部门"></el-table-column>
          <el-table-column prop="position" label="职位"></el-table-column>
          <el-table-column label="状态" prop="status">
            <!-- 表格中的开关使用 -->
            <template slot-scope="scoped">
              <el-switch
                v-model="scoped.row.status"
                style="display: block; width: auto; height: auto"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeStatus($event, scoped.row, scoped.$index)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="option" label="操作">
            <span class="column">编辑</span>
            <span class="column">删除</span>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      form: {
        username: "",
        name: "",
        phone: "",
        dept: "",
        position: "",
        status: true,
      },
      tableData: [
        {
          username: "win",
          name: "李小狼",
          phone: "122222121121",
          dept: "资运部",
          position: "翻斗花园二号",
          statue: true,
        },
        {
          username: "win",
          name: "李小狼",
          phone: "122222121121",
          dept: "资运部",
          position: "翻斗花园二号",
          statue: true,
        },
      ],
      dialogVisible: false,
      client: [
        {
          username: "",
          name: "",
          phone: "",
          dept: "",
          position: "",
          status: true,
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}

.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}

.text1 {
  font-size: 14px;
  position: absolute;
  left: 12px;
}

.text2 {
  font-size: 12px;
  position: absolute;
  left: 100px;
  color: red;
}

.text3 {
  font-size: 12px;
  position: absolute;
  left: 180px;
  color: red;
}

.text4 {
  font-size: 12px;
  position: absolute;
  right: 140px;
  cursor: pointer;
}

.info1 {
  font-size: 14px;
  position: absolute;
  right: 70px;
  top: 14px;
}

.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}

.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
  margin-top: 20px;
}

.column {
  font-size: 12px;
  margin-right: 5px;
}
</style>